<template>
	<view class="picGroup">
		<view :style="{width:width+'px',aspectRatio:ratio}" class="box add" v-if="!picurl" @click="selectPicurl">
			<uni-icons type="plusempty" size="30" color="#999"></uni-icons>
		</view>
		<view :style="{width:width+'px',aspectRatio:ratio}" class="box pic" v-else>
			<image :src="picurl" mode="aspectFit"></image>
			<view class="mask">
				<view class="icon" @click="editImg">
					<uni-icons type="compose" size="20" color="#fff"></uni-icons>
				</view>
				<view class="icon" @click="delImg">
					<uni-icons type="trash" size="20" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		
		
		
		<xxm-cropper-image ref="cropperRef" :maxImgSize="maxImgSize" :tempurl="picurl"
		 @confirm="cropperChange"	 
		 ></xxm-cropper-image>
	</view>
</template>

<script setup>
import {ref} from "vue";
// import cropperImage from "../cropper-image/cropper-image.vue"
const props = defineProps({
	picurl:{
		type:String,
		default:""
	},
	maxImgSize:{
		type:Number,
		default:1200
	},
	width:{
		type:Number,
		default:200
	},
	ratio:{
		type:String,
		default:"16 / 9"
	}
})

const emits = defineEmits(["update:picurl"])
const cropperRef = ref(null);
const selectPicurl = ()=>{
	uni.chooseImage({
		count:1,
		success:res=>{				
			emits("update:picurl",res.tempFilePaths[0])	
		}
	})
}

const delImg =()=>{
	emits("update:picurl","")	
}

const editImg = ()=>{
	cropperRef.value.open();
}

const  cropperChange = (e)=>{
	console.log(e);
	emits("update:picurl",e)
}

</script>

<style lang="scss" scoped>

.picGroup{
		.box{			
			border:1px solid #e4e4e4;
			border-radius: 5px;
			overflow: hidden;
		}
		.add{
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
		}
		.pic{
			position: relative;
			background: conic-gradient(#ccc 0 25%,#fff 25% 50%,#ccc 50% 75%,#fff 75%);
			background-size: 10px 10px;
			image{
				width: 100%;
				height: 100%;
			}
			.mask{
				position: absolute;
				bottom:0;
				left:0;
				width: 100%;
				height: 30px;
				background: rgba(0,0,0,0.4);
				display: flex;
				align-items: center;
				justify-content: center;
				.icon{					
					flex:1;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}
		}
	}
</style>